<template>
  <div class="userManage">
    <div class="content">
      <div class="bar">
        <div class="barLeft">
          <el-button type="success" icon="el-icon-plus" size="mini" @click="addCheManage">新增</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini">IP白名单</el-button>
        </div>
        <div class="barRight">
          <el-input v-model="search" placeholder="请输入考勤类型" class="barInput" size="mini"></el-input>
          <el-button slot="append" icon="el-icon-search" size="mini" @click="searchAtt"></el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="id" label="ID" width="60" sortable></el-table-column>
        <el-table-column prop="label" label="类型" width="130" sortable></el-table-column>
        <el-table-column prop="updateTime" label="时间" width="300"></el-table-column>
        <el-table-column prop="ip" label="IP" width="300"></el-table-column>
        <el-table-column prop="memo" label="备注" width="300"></el-table-column>
        <el-table-column prop="state" label="状态" width="130" sortable>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">正常</el-tag>
            <el-tag v-if="scope.row.status == 2" type="info">迟到</el-tag>
            <el-tag v-if="scope.row.status == 3" type="warning">早退</el-tag>
            <el-tag v-if="scope.row.status == 4" type="danger">旷工</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="chanCheManage(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteCheMana(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <pager :page=page :limit=limit :total=total :lastPage=lastPage @handleSizeChange="handleSizeChange"
          @toLastPage="toLastPage" @toFirstPage="toFirstPage" @handleCurrentChange="handleCurrentChange"></pager>
      </div>
    </div>
  </div>
</template>
<script>
import pager from "@/views/Checking/component/pager.vue";
export default {
  name: 'chenManage',
  mixins: [],
  props: {

  },
  data() {
    return {
      search: "",
      tableData: [],
      page: 1,
      limit: 10,
      lastPage: 0,
      total: 0,
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  methods: {
    //删除考勤信息；
    deleteCheMana(val) {

      let res = this.$api.checking.postDeleteAtt(val.id);
      res.then(() => {
        this.getAllAttend()
      })


    },
    addCheManage() {
      this.$router.push("/addCheManage")
    },
    //修改考勤信息
    chanCheManage(val) {
      // console.log(val);
      // this.$router.push("/addCheManage")
      this.$router.push({ path: '/changCheman', query: { id: val.id } })
    },
    //获取所有考勤信息：
    async getAllAttend() {
      let res = await this.$api.checking.getAttendList({ currentPage: this.page, pageSize: this.limit });
      // console.log(res);
      console.log(res.data.data.list);
      this.tableData = [...res.data.data.list];
      this.tableData.forEach((item) => {
        if (item.type == 1) {
          item.label = "上班"
        } else if (item.type == 2) {
          item.label = "下班"
        } else if (item.type == 3) {
          item.label = "外出"
        } else if (item.type == 4) {
          item.label = "请假"
        } else if (item.type == 5) {
          item.label = "加班"
        }
      })
      this.total = res.data.data.total;
      this.lastPage = res.data.data.pages
    },
    //模糊查询
    async searchAtt() {
      let res = await this.$api.checking.getSearchAtt({ condition: this.search, currentPage: 1, pageSize: 1 });
      console.log(res.data.data.list);
      this.tableData = [...res.data.data.list]
      this.total = this.tableData.length
      this.tableData.forEach((item) => {
        if (item.type == 1) {
          item.label = "上班"
        } else if (item.type == 2) {
          item.label = "下班"
        } else if (item.type == 3) {
          item.label = "外出"
        } else if (item.type == 4) {
          item.label = "请假"
        } else if (item.type == 5) {
          item.label = "加班"
        }
      })
      this.lastPage = Math.ceil(this.tableData.length / this.limit)


    },
    //pagesize改变重新获取考勤信息
    handleSizeChange(val) {
      this.limit = val;
      this.lastPage = Math.ceil(this.tableData.length / this.limit);
      this.getAllAttend()
    },
    //最后一页考勤数据
    toLastPage(val) {
      this.page = val;
      this.getAllAttend()
    },
    //首页考勤数据
    toFirstPage(val) {
      this.page = val;
      this.getAllAttend()
    },
    //当前页考勤数据
    handleCurrentChange(val) {
      this.page = val;
      this.getAllAttend()
    }

  },
  //测试接口，拿考勤数据
  created() {
    this.getAllAttend();
    this.lastPage = Math.ceil(this.tableData.length / this.limit)
    this.total = this.tableData.length

  },
  components: {
    pager,
  }
};
</script>
<style lang='less' scoped>
.el-icon-arrow-right {
  padding: 0 5px;
  color: #ccc;
}

.el-icon-s-home {
  color: #444;
  display: inline-block;
  margin-right: 5px;
}

.font-left {
  color: #444;
}

.font-right {
  color: #777;
}

.content {
  padding: 15px;
  background-color: #f5f5f5;
}

.bar {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px;
  border-top: 3px solid #d2d6de;
  border-bottom: 1px solid #f4f4f4;
}

.barRight {
  display: flex;
}

.el-button-success {
  background-color: red;
}

.el-table-column {
  color: #333333;
  height: 37px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
  line-height: 30px;
}

.footerLeft {
  display: flex;
  margin-left: 5px;
  font-size: 12px;
}

.footerLeft>div {
  padding: 2px;
}

.mid {
  display: inline-block;
  margin: 0 5px;
}

.footerLeft>div>span {
  padding: 0 10px;
}

.footerRight {
  display: flex;
}

.footerBtn {
  width: 30px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>